<template>
	<view>
		<u-navbar title="派车录入" :is-back="false" :background="navbarBg" title-color="#fff" :border-bottom="false" back-icon-color="#fff"></u-navbar>
		<view class="form-box">
			<u-form :model="form" ref="uForm" label-width="200rpx" :error-type="['toast']">
				<view class="item">
					<view class="project-name">{{dname}}欢迎您！<text>请选择供货单位及要求供应时间后，选择送货订单，仔细核对订单编号及物料类型，避免出错。</text></view>
					
				</view>
				<view class="item">
					<u-form-item label="供货单位" prop="specification">
						<view class="select-inp" @click="supplierSelectShow = true">
							<text v-if="supplierName">{{supplierName}}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
						<u-select v-model="supplierSelectShow" :list="supplierList" @confirm="confirm($event,'supplierId')"></u-select>
					</u-form-item>
					<u-form-item label="要求供应时间">
						<view class="select-inp" @click="timeSelectShow = true">
							<text v-if="supplyTime">{{supplyTime}}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
						<u-picker :safe-area-inset-bottom="true" v-model="timeSelectShow" mode="time" @confirm="confirm($event,'supplyTime')"></u-picker>
					</u-form-item>
					<u-form-item label="送货订单" prop="goodsWeight">
						<view class="select-inp" @click="orderSelectShow = true">
							<text v-if="form.orderId">{{orderTxt}}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
						<u-select v-model="orderSelectShow" :list="orderList" @confirm="confirm($event,'orderId')"></u-select>
					</u-form-item>
					<u-form-item label="车牌号" prop="plateNumber">
						<u-input v-model="form.plateNumber" placeholder="请输入车牌号" disabled @click="plateShow=true"/>
						<u-button plain size="mini" shape="circle" @click="historyShow = true">历史记录</u-button>
					</u-form-item>
					<u-select v-model="historyShow" :list="plateSelect" @confirm="confirmPlate"></u-select>
					<plate-input v-if="plateShow" :plate="form.plateNumber" @export="setPlate" @close="plateShow=false" />
					
					<u-form-item label="扫码时间"><u-input v-model="time" input-align="right" disabled /></u-form-item>
				</view>
				<u-button type="primary" @click="submit">提交</u-button>
			</u-form>
			 <u-popup ref="popup" mode="center" :is-mask-click="true" width="650rpx" border-radius="20">
				 <view class="uni-image">
					<image class="image" :src="imgUrl" mode="scaleToFill" />
					<view class="uni-image-close">
						<u-button type="primary" @click="close">关 闭</u-button>
					</view>
				</view>
			 </u-popup>
		</view>
	</view>
</template>

<script>
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue'
	import moment from 'moment'
	export default{
		components: {
			plateInput
		},
		data(){
			return{
				navbarBg:{'background':'rgba(65, 117, 255, 1)'},
				tid:1,
				did:null,
				dname:'',
				// 入口id
				areaId:'',
				//chepai
				plateShow:false,
				form:{
					orderId:'',
					plateNumber:'',
				},
				historyShow:false,
				plateList:[],
				rules: {
					orderId: [{required: true, message: '请选择发货订单', trigger: ['change','blur']}],
					plateNumber: [{required: true, message: '请输入车牌号', trigger: ['change','blur']}],
				},
				//供应商列表
				supplierSelectShow:false,
				supplierName:null,
				supplierId:null,
				supplierList:[],
				//供货时间
				timeSelectShow:false,
				supplyTime:'',
				//订单
				orderSelectShow:false,
				orderList:[],
				orderTxt:'',
				time:moment().format('YYYY-MM-DD HH:mm:SS'),
				// 弹窗
				show:true,
				imgUrl:''
			}
		},
		computed:{
			plateSelect(){
				let arr = []
				this.plateList.map(item => {
					arr.push({
						value:item,
						label:item
					})
				})
				return arr
			}
		},
		onLoad(option){
			this.tid = 9
			this.$u.vuex('vuex_project',JSON.stringify({deptId:option.did}))
			this.dname = option.dname
			this.areaId = option.areaid
			this.driverSupplier()
			this.plateList = uni.getStorageSync('plateList') || []
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			//获取供应商列表
			driverSupplier(){
				this.$u.api.driverSupplier({current:0,size:100}).then(res => {
					let arr = []
					res.data.records.map(item => {
						arr.push({
							value:item.id,
							label:item.name
						})
					})
					this.supplierList = arr
				})
			},
			confirm(e,type){
				if(type == 'supplierId'){
					this.supplierName = e[0].label
					this.supplierId = e[0].value
					if(this.supplierId && this.supplyTime) this.getDriverOrder()
				}
				if(type == 'supplyTime'){
					this.supplyTime = `${e.year}-${e.month}-${e.day}`
					if(this.supplierId && this.supplyTime) this.getDriverOrder()
				}
				if(type == 'orderId'){
					this.form.orderId = e[0].value
					this.orderTxt = e[0].label
				}
			},
			getDriverOrder(){
				this.$u.api.driverOrder({'supplierId':this.supplierId,'supplyTime':this.supplyTime,current:1,size:100}).then((res) => {
					let arr = []
					res.data.records.map(item => {
						arr.push({
							value:item.id,
							label:`${item.num}——${item.skuName}`,
							name:item.locationName
						})
					})
					this.orderList = arr
				})
			},
			setPlate(e){
				this.form.plateNumber = e
				this.plateShow = false
			},
			//提交
			submit(){
				this.$refs.uForm.validate(valid => {
					// uni.saveImageToPhotosAlbum({filePath:'https://iotx.oss-cn-beijing.aliyuncs.com/iotx-file/1-%E5%8A%9E%E5%85%AC%E6%A0%8B1.png'})
					if(valid){
						uni.showLoading({})
						//储存到本地 
						let res = this.plateList.findIndex(item => {
							return item == this.form.plateNumber
						})
						if(res < 0){
							this.plateList.unshift(this.form.plateNumber)
							uni.setStorageSync('plateList',this.plateList)
						}
						this.$u.api.insert({
							orderId:this.form.orderId,
							plateNumber:this.form.plateNumber,
						},{'TENANT-ID':this.tid,'Project-Id':this.did}).then(res => {
							uni.hideLoading()
							if(res.code == 0){
								uni.showModal({
									title:'提示',
									content:"提交成功，是否需要为您导航至卸货位置？",
									success: (res) => {
										if(res.confirm) {
											this.$refs.popup.open('center')
											let locationName
											 this.orderList.filter(item => {
												if(item.value == this.form.orderId) {
													locationName = item.name
												}
											})
											this.imgUrl = `https://iotx.oss-cn-beijing.aliyuncs.com/iotx-file/${this.areaId}-${locationName}.png`
										}else{
											uni.showToast({
												icon:'none',
												title:'祝您工作愉快！您可关闭该页面'
											})
										}
									}
								})
							}else{
								uni.showToast({
									icon:'none',
									title:res.msg
								})
							}
						})
					}
				})
				
			},
			// 关闭地图弹窗
			close() {
				this.$refs.popup.close()
			},
			confirmPlate(e){
				this.form.plateNumber = e[0].value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box{
		padding: 24rpx;
		.item{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			.project-name{
				font-size: 32rpx;
				padding: 30rpx 0;
				text{
					display: block;
					font-size: 24rpx;
					color: #dd6161;
					margin-top: 16rpx;
					line-height: 1.8;
				}
			}
		}
		.select-inp{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 100%;
			text{
				margin-right: 8rpx;
			}
			.placeholder{
				color: #c0c4cc;
			}
		}
	}
	.uni-image-close {
		text-align: center;
	}
</style>
